<!DOCTYPE html>
<html margin="0" height="100%" width="100%">
<head>
<script src="jquery-1.11.2.js"></script>
</head>
<body margin="0" height="100%" width="100%">
    <svg width="600" height="590">
		<polygon id="t1" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t2" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t3" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t4" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t5" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t6" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t7" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t8" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t9" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t10" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t11" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t12" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t13" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t14" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t15" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t16" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t17" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t18" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t19" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t20" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t21" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t22" stroke="black" fill="red" stroke-width="1" />
		<polygon id="t23" stroke="red" fill="black" stroke-width="1" />
		<polygon id="t24" stroke="black" fill="red" stroke-width="1" />
		<polygon id="bar" points="280 0, 320 0, 320 590, 280 590" stroke="black" fill="green" stroke-width="1" />
		<polygon id="ledge" points="0 0, 40 0, 40 590, 0 590" stroke="black" fill="blue" stroke-width="1" />
		<polygon id="redge" points="560 0, 600 0, 600 590, 560 590" stroke="black" fill="blue" stroke-width="1" />
		<circle id="p1c1" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c2" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c3" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c4" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c5" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c6" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c7" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c8" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c9" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c10" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c11" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c12" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c13" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c14" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p1c15" r="20" stroke="black" stroke-width="1" fill="yellow" />
		<circle id="p2c1" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c2" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c3" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c4" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c5" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c6" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c7" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c8" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c9" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c10" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c11" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c12" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c13" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c14" r="20" stroke="black" stroke-width="1" fill="brown" />
		<circle id="p2c15" r="20" stroke="black" stroke-width="1" fill="brown" />
		<rect id="d1" x="110" y="285"  width="40" height="40" stroke="black" stroke-width="1" fill="orange" />
		<rect id="d2" x="170" y="285" width="40" height="40" stroke="black" stroke-width="1"" fill="orange" />
		<circle id="d1d1" cx="119" cy="294" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d1d2" cx="141" cy="294" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d1d3" cx="119" cy="305" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d1d4" cx="141" cy="305" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d1d5" cx="119" cy="316" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d1d6" cx="141" cy="316" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d1d7" cx="130" cy="305" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d1" cx="179" cy="294" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d2" cx="201" cy="294" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d3" cx="179" cy="305" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d4" cx="201" cy="305" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d5" cx="179" cy="316" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d6" cx="201" cy="316" r="4" stroke="black" stroke-width="1" fill="black" />
		<circle id="d2d7" cx="190" cy="305" r="4" stroke="black" stroke-width="1" fill="black" />
</svg>
<div id="svgContainer" onload="populateBoard()"> </div>
<input id="d1value" type="hidden" value="0"/>
<input id="d2value" type="hidden" value="0"/>
<input id="button1" type="button" value="Populate Board"
            onclick="populateBoard()"/>
<input id="button2" type="button" value="Roll Dice"
            onclick="rollDice(1,6)"/>

<script type="text/javascript">
	var points = [];
	var d1Active = false;
	var d2Active = false;
	var hotpoint1 = 0;
	var hotpoint2 = 0;
	function onLoad(populateBoard) {
        //svg.text(10, 20, error || 'Loaded into ' + this.id);
        //resetSize(svg, null, null); //'100%', '100%');
    }
    function populateBoard() {  
		for (i = 1; i <= 24; i ++){
			points[i] = { id: i, count: 0, player: 0 };
		}
		for (i = 1; i <= 6; i++) {
			var element = "t" + (13 - i);
			document.getElementById(element).setAttribute("points", i * 40 + " 0, " + (i * 40 + 20) + " 230, " + (i * 40 + 40) + " 0");
		}
		for (i = 7; i <= 12; i++) {
			var element = "t" + (13 - i);
			document.getElementById(element).setAttribute("points", (i * 40 + 40) + " 0, " + (i * 40 + 60) + " 230, " + (i * 40 + 80) + " 0");
		}
		for (i = 1; i <= 6; i++) {
			var element = "t" + (i + 12);
			document.getElementById(element).setAttribute("points", i * 40 + " 590, " + (i * 40 + 20) + " 360, " + (i * 40 + 40) + " 590");
		}
		for (i = 7; i <= 12; i++) {
			var element = "t" + (i + 12);
			document.getElementById(element).setAttribute("points", (i * 40 + 40) + " 590, " + (i * 40 + 60) + " 360, " + (i * 40 + 80) + " 590");
		}
		
		for (i = 1; i <= 2; i++) {
			var checker = "p1c" + i;
			var res = calcCheckerXY( 1, 1);
			moveChecker(checker, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 1);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		for (i = 3; i <= 7; i++) {
			var checker = "p1c" + i;
			var res = calcCheckerXY( 12, 1);
			moveChecker("p1c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 12);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		for (i = 8; i <= 10; i++) {
			var checker = "p1c" + i;
			var res = calcCheckerXY( 17, 1);
			moveChecker("p1c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 17);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		for (i = 11; i <= 15; i++) {
			var checker = "p1c" + i;
			var res = calcCheckerXY( 19, 1);
			moveChecker("p1c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 19);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		
		
		for (i = 1; i <= 5; i++) {
			var checker = "p2c" + i;
			var res = calcCheckerXY( 5, 2);
			moveChecker("p2c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 6);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		for (i = 6; i <= 8; i++) {
			var checker = "p2c" + i;
			var res = calcCheckerXY( 7, 2);
			moveChecker("p2c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 8);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		for (i = 9; i <= 13; i++) {
			var checker = "p2c" + i;
			var res = calcCheckerXY( 13, 2);
			moveChecker("p2c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 13);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		for (i = 14; i <= 15; i++) {
			var checker = "p2c" + i;
			var res = calcCheckerXY( 24, 2);
			moveChecker("p2c" + i, res[0], res[1]);
			document.getElementById(checker).setAttribute("onPoint", 24);
			$("#" +checker).click(function() {
				$(this).attr("fill", "purple");
				highlightPoints(this);
			});
		}
		
		hideDice();
	}
	function highlightPoints(checker){
		var onPoint = checker.getAttribute("onPoint");
		var d1val = document.getElementById("d1value").value;
		var d2val = document.getElementById("d2value").value;		
		var checkerID = checker.id;
		var player = checker.id.split("p")[1].split("c")[0];
		var point1; var point2;
		var numOnPoint = parseFloat(onPoint);
		var numD1 = parseFloat(d1val);
		var numD2 = parseFloat(d2val);
		if (player == 1) {
			point1 = "t" + (numOnPoint + numD1);
			point2 = "t" + (numOnPoint + numD2);
		}
		else{
			point1 = "t" + (numOnPoint - numD1);
			point2 = "t" + (numOnPoint - numD2);
		}
		if (d1Active)
		{
			$("#" + point1).attr("fill", "green");
			$("#" + point1).click(function() {pointClick(checkerID, document.getElementById(point1), "1")});
		}
		if (d2Active)
		{
			$("#" + point2).attr("fill", "green");
			$("#" + point2).click(function() {pointClick(checkerID, document.getElementById(point2), "1")});
		}
		hotpoint1 = point1;
		hotpoint2 = point2;
	}
	function resetPoint(point){	
		$(point).unbind("click");
		if (isEven(pointNumber(point)))
		{
			$(point).attr("fill", "black");
		}
		else
		{
			$(point).attr("fill", "red");
		}
	}
	function resetPoints(){
		resetPoint(document.getElementById(hotpoint1));
		resetPoint(document.getElementById(hotpoint2));
	}
	function pointNumber(point){
		return point.id.split("t")[1];
	}
	function isEven(n) {
		return isNumber(n) && (n % 2 == 0);
	}
	function isNumber(n)
	{
	   return n == parseFloat(n);
	}
	function pointClick(checkerID, point, player){
		var res = calcCheckerXY( pointNumber(point), player);
		moveChecker(checkerID, res[0], res[1]);
		resetPoints();
		if (player == "1"){
			$("#" + checkerID).attr("fill", "yellow");	
		}
		else{
			$("#" + checkerID).attr("fill", "red");	
		}
		if (pointNumber(point) == document.getElementById("d1value").value)
		{
			d1Active = false;
			$("#d1").css("visibility", "hidden");
		}
		else
		{
			d2Active = false;
			$("#d2").css("visibility", "hidden");
		}
		return true;
	}
	function moveChecker(checkerID, x, y){
		document.getElementById(checkerID).setAttribute("cx", x);
		document.getElementById(checkerID).setAttribute("cy", y);
	}
	function calcCheckerXY( point, player ){
		var result = [];
		var count = points[point].count;
		if (points[point].player == 0)
		{
			points[point].player = player;
		}
		if (count <= 1 || points[point].player == player)
		{
			if (point <= 6){
				result[0] = 580 - (point * 40);	
				result[1] = (count * 42) + 21;		
			}
			else if (point <= 12){
				result[0] = 540 - (point * 40);
				result[1] = (count * 42) + 21;
			}
			else if (point <= 18){
				result[0] = 20 + ((point - 12) * 40);
				result[1] = 550 - (count * 42) + 21;
			}
			else if (point <= 24){
				result[0] = 60 + ((point - 12) * 40);	
				result[1] = 550 - (count * 42) + 21;	
			}
			points[point].count++;
		}
		else {result = false;}
		return result;
	}
	
	function rollDice(){		
		showDice();
		clearDice();
		var value1 = Math.floor((Math.random() * 6) + 1);
		var value2 = Math.floor((Math.random() * 6) + 1);		
		document.getElementById("d1value").value = value1;
		document.getElementById("d2value").value = value2;
		populateDi(1, value1);
		populateDi(2, value2);
		d1Active = true;
		d2Active = true;
	}
	
	function populateDi(di, number)
	{
		if (number == 1 || number == 3 || number == 5){
			$("#d" + di + "d7").css("visibility", "visible");
		}
		if (number >= 2){
			$("#d" + di + "d1").css("visibility", "visible");
			$("#d" + di + "d6").css("visibility", "visible");
		}
		if (number >= 4){
			$("#d" + di + "d2").css("visibility", "visible");
			$("#d" + di + "d5").css("visibility", "visible");
		}
		if (number == 6){
			$("#d" + di + "d3").css("visibility", "visible");
			$("#d" + di + "d4").css("visibility", "visible");
		}
	}
	
	function hideDice(){		
		$("#d1").css("visibility", "hidden");
		$("#d2").css("visibility", "hidden");
		clearDice();
	}
	
	function clearDice(){	
		for (i = 1; i <=7; i++){
			$("#d1d" + i).css("visibility", "hidden");
			$("#d2d" + i).css("visibility", "hidden");
		}	
	}
	
	function showDice(){		
		$("#d1").css("visibility", "visible");
		$("#d2").css("visibility", "visible");
	}

</script>
</body>
</html>